<template>
  <div class="">
    <ul>
      <!-- <li>宝马</li> -->
      <li
        v-for="(item, i) in showlist"
        :key="i"
        :class="{ active: index == i }"
        @click="liJump(item)"
      >
        {{ item }}--{{ i }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    showlist: Array,
    index: Number
  },
  data() {
    return {
    //   index: -1,
    };
  },
  mounted() {},
  methods: {
    liJump(val) {
       this.$router.push({ path: "/about", query: { val: val } });
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
ul {
  list-style: none;
  position: absolute;
  top: 50px;
  left: 10px;
  li {
    width: 460px;
    line-height: 40px;
    // border-bottom: 1px solid #ccc;
    &:hover {
      background: skyblue;
    }
  }
  .active {
    background: skyblue;
  }
}
</style>
